<template>
  <view class="order-management">
    <!-- 顶部导航栏 -->
   <view class="nav-bar">
      <view class="nav-background"></view>
      <view class="nav-content">
        <!-- 搜索区域 -->
        <view class="search-section">
          <view class="search-container">
            <!-- 搜索栏 -->
            <view class="search-bar">
              <input 
                class="search-input" 
                v-model="searchKeyword" 
                placeholder="输入需要搜索的内容"
                placeholder-style="color: #999"
                @input="handleSearch"
              />
              <uni-icons type="search" size="18" color="#333" />
            </view>
          </view>
        </view>
        <!-- 筛选区域 -->
        <view class="filter-section">
          <view class="order-count">
            <text class="count-text">共{{ filteredOrders.length }}条</text>
          </view>
          <view class="status-filter" @click="showStatusFilter">
            <text class="filter-text">{{ currentStatus }}</text>
            <uni-icons type="down" size="14" color="#fff" />
          </view>
        </view>
      </view>
    </view>

    <!-- 订单列表 -->
    <scroll-view class="order-list" scroll-y enhanced :show-scrollbar="false">
      <view class="order-container">
        <view 
          class="order-card" 
          v-for="(order, index) in filteredOrders" 
          :key="index"
          @click="viewOrderDetail(order)"
        >
          <view class="order-header">
            <text class="order-number">订单号: {{ order.orderNumber }}</text>
            <text class="order-price">¥{{ order.price }}</text>
          </view>
          <view class="order-separator"></view>
          
          <view class="order-details">
            <text class="detail-text">下单用户: {{ order.customerName }}</text>
            <text class="detail-text">预约时间: {{ order.appointmentTime }}</text>
            <text class="detail-text">服务项目: {{ order.serviceItems }}</text>
            <view class="service-separator"></view>
            <view class="order-footer">
              <text class="order-time">下单时间: {{ order.orderTime }}</text>
              <button class="detail-btn" @click.stop="viewOrderDetail(order)">
                <text class="btn-text">查看详情</text>
              </button>
            </view>
          </view>
        </view>
        
        <!-- 空状态 -->
        <view v-if="filteredOrders.length === 0" class="empty-state">
          <text class="empty-text">暂无订单数据</text>
        </view>
      </view>
    </scroll-view>

    <!-- 状态筛选弹窗 -->
    <view v-if="showFilter" class="filter-overlay" @click="hideStatusFilter">
      <view class="filter-popup" @click.stop>
        <view class="filter-title">选择订单状态</view>
        <view class="filter-options">
          <view 
            class="filter-option" 
            v-for="status in statusOptions" 
            :key="status.value"
            :class="{ 'option-active': currentStatus === status.label }"
            @click="selectStatus(status)"
          >
            <text class="option-text">{{ status.label }}</text>
            <view v-if="currentStatus === status.label" class="option-check">
              <uni-icons type="checkmarkempty" size="16" color="#3388FF" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      currentStatus: '待服务',
      showFilter: false,
      statusOptions: [
        { label: '待服务', value: 'pending' },
        { label: '进行中', value: 'processing' },
        { label: '已完成', value: 'completed' },
        { label: '已取消', value: 'cancelled' }
      ],
      orders: [
        {
          orderNumber: '2021010831213',
          price: '500',
          customerName: '张三丰',
          appointmentTime: '2023-03-10 11:00',
          serviceItems: '宝马X5加装轮、清洁车辆、汽车美容',
          orderTime: '2022-10-12 11:09',
          status: 'pending'
        },
        {
          orderNumber: '2021010831214',
          price: '800',
          customerName: '李四',
          appointmentTime: '2023-03-11 14:30',
          serviceItems: '奔驰E级保养、轮胎更换、内饰清洁',
          orderTime: '2022-10-13 09:15',
          status: 'pending'
        },
        {
          orderNumber: '2021010831215',
          price: '1200',
          customerName: '王五',
          appointmentTime: '2023-03-12 16:00',
          serviceItems: '奥迪A6维修、发动机检查、全车检测',
          orderTime: '2022-10-14 15:30',
          status: 'pending'
        }
      ]
    };
  },
  computed: {
    filteredOrders() {
      let filtered = this.orders;
      
      // 按状态筛选
      const statusValue = this.statusOptions.find(s => s.label === this.currentStatus)?.value;
      if (statusValue) {
        filtered = filtered.filter(order => order.status === statusValue);
      }
      
      // 按关键词搜索
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase();
        filtered = filtered.filter(order => 
          order.orderNumber.toLowerCase().includes(keyword) ||
          order.customerName.toLowerCase().includes(keyword) ||
          order.serviceItems.toLowerCase().includes(keyword)
        );
      }
      
      return filtered;
    }
  },
  methods: {
    navigateBack() {
      uni.navigateBack();
    },
    handleMore() {
      uni.showToast({
        title: '更多功能',
        icon: 'none'
      });
    },
    handleFilter() {
      uni.showToast({
        title: '高级筛选',
        icon: 'none'
      });
    },
    handleSearch() {
      // 搜索逻辑已在computed中处理
    },
    showStatusFilter() {
      this.showFilter = true;
    },
    hideStatusFilter() {
      this.showFilter = false;
    },
    selectStatus(status) {
      this.currentStatus = status.label;
      this.showFilter = false;
    },
    viewOrderDetail(order) {
      console.log('查看订单详情:', order);
      uni.navigateTo({
        url: `/pages/oder-management/orderdetails/orderdetails?orderNumber=${order.orderNumber}&customerName=${order.customerName}&price=${order.price}&appointmentTime=${order.appointmentTime}&serviceItems=${order.serviceItems}&orderTime=${order.orderTime}`
      });
    }
  }
};
</script>

<style scoped>
.order-management {
  min-height: 100vh;
  background: #f5f5f5;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

/* 导航栏样式 */
.nav-bar {
  position: relative;
  z-index: 1;
  padding-top: 30px;
  min-height: 200px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.nav-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #3183FB;
}

.nav-content {
  position: relative;
  z-index: 1;
  padding: 0 20px 32px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}


/* 搜索区域 */
.search-section {
  position: relative;
  z-index: 10;
  padding: 0 20px 20px;
}

.search-container {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 筛选区域 */
.filter-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  margin-top: -30px;
}

/* 搜索栏 */
.search-bar {
  background: transparent;
  border-radius: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: none;
  margin-bottom: 0;
}

.search-input {
  flex: 1;
  font-size: 16px;
  color: #333;
  background: transparent;
  border: none;
}

.order-count {
  display: flex;
  align-items: center;
}

.count-text {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.status-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
  transition: all 0.3s ease;
}

.status-filter:active {
  transform: scale(0.98);
}

.filter-text {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

/* 订单列表 */
.order-list {
  flex: 1;
  padding: 0 20px 20px;
  position: relative;
  z-index: 10;
  height: 0;
  margin-top: 0;
  width: 100%;
  box-sizing: border-box;
}

.order-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

/* 订单卡片 */
.order-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
}

.order-card:active {
  background: #f8f9fa;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.order-separator {
  height: 1px;
  background: #f0f0f0;
  margin-bottom: 12px;
}

.service-separator {
  height: 1px;
  background: #f0f0f0;
  margin: 8px 0;
}

.order-number {
  font-size: 16px;
  color: #333;
  font-weight: 600;
  flex: 1;
}

.order-price {
  font-size: 18px;
  color: #FF6B35;
  font-weight: 700;
  flex-shrink: 0;
}

.order-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-text {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.order-time {
  font-size: 12px;
  color: #999;
}

.detail-btn {
  background: #3388FF;
  color: #fff;
  padding: 4px 12px;
  border-radius: 16px;
  border: none;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-btn:active {
  background: #1976D2;
  transform: scale(0.95);
}

.btn-text {
  font-size: 12px;
  font-weight: 500;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.empty-text {
  font-size: 16px;
  color: #666;
  font-weight: 500;
}

/* 筛选弹窗 */
.filter-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.filter-popup {
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 24px;
  width: 100%;
  max-width: 100%;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.1);
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.filter-title {
  font-size: 18px;
  color: #333;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
}

.filter-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.filter-option:active {
  background: #f5f5f5;
}

.option-active {
  background: rgba(25, 118, 210, 0.1);
}

.option-text {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.option-check {
  display: flex;
  align-items: center;
}

/* 响应式设计 */
@media (max-width: 750px) {
  .nav-bar {
    min-height: 160px;
  }
  
  .nav-content {
    padding: 0 16px 24px 16px;
  }
  
  .order-list {
    padding: 12px 16px;
    margin-top: -55px;
  }
  
  .order-container {
    gap: 12px;
  }
  
  .order-card {
    padding: 16px;
    border-radius: 10px;
  }
  
  .order-number {
    font-size: 15px;
  }
  
  .order-price {
    font-size: 16px;
  }
  
  .detail-text {
    font-size: 13px;
  }
  
  .detail-btn {
    padding: 3px 10px;
    font-size: 11px;
    height: 26px;
    border-radius: 14px;
  }
}
</style>